<template>
  <div>
    <div class="top-header">
      <div class="flex align-center">
        <img class="logo" :src="require('@/assets/images/logo.png')" />
        <div class="title">
          <span class="font-6">业务数据大盘</span>
          <div class="cn-text">Business Data Market</div>
        </div>
      </div>
      <div class="date">
        {{ date }}
        <span class="time">{{ time }}</span>
      </div>
    </div>
    <div class="separator"></div>
  </div>
</template>

<script>
import { clock as useClock } from '@/hooks';

export default {
	name : 'topHeader',
	setup () {
		return {
			...useClock(),
		};
	},
};
</script>
<style lang="scss" scoped>
.top-header {
  height: 167px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 64px;
}
.logo {
  width: 130px;
  height: 130px;
}
.title {
  margin-left: 60px;
}
.cn-text {
  font-size: 35px;
}
.date {
  width: 540px;
  font-size: 52px;
  font-family: DIN;
  font-weight: 500;
}
.time {
  color: #c5fb79;
}
.separator {
  background-color: hsla(0, 0%, 100%, 1);
  height: 1px;
}
</style>
